<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="售后设置">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="受理单抬头"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['recive_head', { rules: [{ required: true, message: '请输入' }] }]" />
        </a-form-item>
        <a-form-item
          label="受理单结尾"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="8" v-decorator="['recive_tail', { rules: [{ required: true, message: '请输入' }] }]" />
        </a-form-item>
        <a-divider dashed />
        <a-form-item
          label="完结单抬头"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['finish_head', { rules: [{ required: true, message: '请输入' }] }]" />
        </a-form-item>
        <a-form-item
          label="完结单结尾"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="8" v-decorator="['finish_tail', { rules: [{ required: true, message: '请输入' }] }]" />
        </a-form-item>
        <a-divider dashed />
        <a-form-item
          label="字号"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['font_size']" placeholder="请选择">
            <a-select-option value="1">小</a-select-option>
            <a-select-option value="2">中</a-select-option>
            <a-select-option value="3">大</a-select-option>
          </a-select>
        </a-form-item>
        <a-divider dashed />
        <a-form-item
          label="个人跟进提醒"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="天" v-decorator="['personal']" />
        </a-form-item>
        <a-form-item
          label="经理监管提醒"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="天" v-decorator="['manager']" />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getAfterSalesSettingUsingPOST, updateAfterSalesSettingUsingPOST } from '@/api/api/shouhouguanli.ts'
import { omit } from 'lodash-es'
export default {
  name: 'ServiceSetting',
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      data: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getAfterSalesSettingUsingPOST()
        .then((res) => {
          this.data = res.data?.list
          const obj = Object.fromEntries(res.data?.list?.map(item => [item.keyName, item.value]))
          this.form.setFieldsValue({ ...obj })
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit(e) {
      console.log(this)

      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          Object.keys(values)?.forEach((key) => {
            this.data?.forEach((item, index) => {
              if(item.keyName === key) {
                this.data[index] = { ...omit(item, ['creator', 'createTime', 'updateTime', 'updater', 'tenantId']), value: values[key] }
              } else {
                this.data[index] = { ...omit(item, ['creator', 'createTime', 'updateTime', 'updater', 'tenantId']) }
              }
            })
          })
          updateAfterSalesSettingUsingPOST({},{ data: this.data  })
            .then(() => {
              this.$message.success('操作成功')
              this.loading = false
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
